<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<%@ include file="/common/global.jsp" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广东石油化工学院学生信息管理系统</title>
    <link rel="stylesheet" type="text/css" href="${path}/static/css/welcome.css"/>
</head>
<body>
<c:choose>
    <c:when test="${user.role == 1}">
        <h1>欢迎您,${user.username}同学,您已经本学期获得绩点:<span id="toltalpoint"></span></h1>
            <div id="main" style="width: 1000px;height: 400px;">
            </div>
    </c:when>
    <c:when test="${user.role == 2}">
        <h1>欢迎您,${user.username}老师<span id="toltalpoint"></span></h1>
        <div id="main" style="width: 1000px;height: 400px;">
        </div>
    </c:when>
</c:choose>
<!-- 为 ECharts 准备一个具备大小（宽高）的显示区域 -->
<script src="https://cdn.bootcss.com/echarts/5.3.1/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="static/js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    layui.use(['form', 'layedit', 'laydate', 'jquery'], function () {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var form = layui.form,
            $ = layui.jquery
        var mydata = [];
        $.ajax({
            type : "post",
            async : true, //异步请求（同步请求将会锁住浏览器，其他操作须等请求完成才可执行）
            url : "${path}/user/getEchartsServlet", //请求发送到TestServlet
            data : {},
            dataType : "json", //返回数据形式为json
            success : function(result) {
                //result为服务器返回的json对象
                if (result.success) {
                    var map1 = {
                        "平均分": result.data[0].avgScore,
                        "最高分": result.data[0].highestScore,
                        "最低分": result.data[0].minimumScore,
                        "挂科人数": result.data[0].numberFailedSubjects,
                        "通过率": result.data[0].passingRate
                    };
                    var map2 = {
                            "平均分": result.data[1].avgScore,
                            "最高分": result.data[1].highestScore,
                            "最低分": result.data[1].minimumScore,
                            "挂科人数": result.data[1].numberFailedSubjects,
                            "通过率": result.data[1].passingRate
                        };


                    //8.取出数据存入数组
                    if (result.msg == '1') {
                        for (var i = 0; i < result.data.length; i++) {
                            mydata[i] = {value: result.data[i].avgpoint, name: result.data[i].coursename}
                        }
                        $('#toltalpoint').text(result.data[0].toltalpoint)
                        myChart.hideLoading(); //隐藏加载动画
                        //9.覆盖操作-根据数据加载数据图表
                        var option = {
                            title: {
                                text: '各项平均绩点分布',
                                subtext: '2021-2022',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left'
                            },
                            series: [
                                {
                                    name: '',
                                    type: 'pie',
                                    radius: '50%',
                                    data: mydata,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }

                    if (result.msg == '2') {

                        const builderJson = {
                            charts: map1 ,
                            components: map2,
                        };

                        const downloadJson = map1;
                        const themeJson =map2;

                        const waterMarkText = '广东石油化工学院';
                        const canvas = document.createElement('canvas');
                        const ctx = canvas.getContext('2d');
                        canvas.width = canvas.height = 100;
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        ctx.globalAlpha = 0.08;
                        ctx.font = '20px Microsoft Yahei';
                        ctx.translate(50, 50);
                        ctx.rotate(-Math.PI / 4);
                        ctx.fillText(waterMarkText, 0, 0);
                        option = {
                            backgroundColor: {
                                type: 'pattern',
                                image: canvas,
                                repeat: 'repeat'
                            },
                            tooltip: {},
                            title: [
                                {
                                    text: '各科分数统计',
                                    left: '25%',
                                    textAlign: 'center'
                                },
                                {
                                    text: result.data[0].courseName,
                                    subtext:
                                        '总计 ' +
                                        Object.keys(downloadJson).reduce(function (all, key) {
                                            return all + downloadJson[key];
                                        }, 0),
                                    left: '75%',
                                    textAlign: 'center'
                                },
                                {
                                    text:  result.data[1].courseName,
                                    subtext:
                                        '总计 ' +
                                        Object.keys(themeJson).reduce(function (all, key) {
                                            return all + themeJson[key];
                                        }, 0),
                                    left: '75%',
                                    top: '50%',
                                    textAlign: 'center'
                                }
                            ],
                            grid: [
                                {
                                    top: 50,
                                    width: '50%',
                                    bottom: '45%',
                                    left: 10,
                                    containLabel: true
                                },
                                {
                                    top: '55%',
                                    width: '50%',
                                    bottom: 0,
                                    left: 10,
                                    containLabel: true
                                }
                            ],
                            xAxis: [
                                {
                                    type: 'value',
                                    max: builderJson.all,
                                    splitLine: {
                                        show: false
                                    }
                                },
                                {
                                    type: 'value',
                                    max: builderJson.all,
                                    gridIndex: 1,
                                    splitLine: {
                                        show: false
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'category',
                                    data: Object.keys(builderJson.charts),
                                    axisLabel: {
                                        interval: 0,
                                        rotate: 30
                                    },
                                    splitLine: {
                                        show: false
                                    }
                                },
                                {
                                    gridIndex: 1,
                                    type: 'category',
                                    data: Object.keys(builderJson.components),
                                    axisLabel: {
                                        interval: 0,
                                        rotate: 30
                                    },
                                    splitLine: {
                                        show: false
                                    }
                                }
                            ],
                            series: [
                                {
                                    type: 'bar',
                                    stack: 'chart',
                                    z: 3,
                                    label: {
                                        position: 'right',
                                        show: true
                                    },
                                    data: Object.keys(builderJson.charts).map(function (key) {
                                        return builderJson.charts[key];
                                    })
                                },
                                {
                                    type: 'bar',
                                    stack: 'chart',
                                    silent: true,
                                    itemStyle: {
                                        color: '#eee'
                                    },
                                    data: Object.keys(builderJson.charts).map(function (key) {
                                        return builderJson.all - builderJson.charts[key];
                                    })
                                },
                                {
                                    type: 'bar',
                                    stack: 'component',
                                    xAxisIndex: 1,
                                    yAxisIndex: 1,
                                    z: 3,
                                    label: {
                                        position: 'right',
                                        show: true
                                    },
                                    data: Object.keys(builderJson.components).map(function (key) {
                                        return builderJson.components[key];
                                    })
                                },
                                {
                                    type: 'bar',
                                    stack: 'component',
                                    silent: true,
                                    xAxisIndex: 1,
                                    yAxisIndex: 1,
                                    itemStyle: {
                                        color: '#eee'
                                    },
                                    data: Object.keys(builderJson.components).map(function (key) {
                                        return builderJson.all - builderJson.components[key];
                                    })
                                },
                                {
                                    type: 'pie',
                                    radius: [0, '30%'],
                                    center: ['75%', '25%'],
                                    data: Object.keys(downloadJson).map(function (key) {
                                        return {
                                            name: key.replace('.js', ''),
                                            value: downloadJson[key]
                                        };
                                    })
                                },
                                {
                                    type: 'pie',
                                    radius: [0, '30%'],
                                    center: ['75%', '75%'],
                                    data: Object.keys(themeJson).map(function (key) {
                                        return {
                                            name: key.replace('.js', ''),
                                            value: themeJson[key]
                                        };
                                    })
                                }
                            ]
                        };
                        myChart.setOption(option);



                    }

                }
            }
        });
    });








</script>

<%--    <c:when test="${user.role == 2}">--%>
<%--        <h1>欢迎你,${user.username}老师</h1>--%>
<%--    </c:when>--%>
<%--    <c:otherwise>--%>
<%--    </c:otherwise>--%>
<%--</c:choose>--%>
</body>
</html>